<template>
	<view class="container">
		
		
		<!-- #ifdef MP-WEIXIN -->
		<view class="user-info-wrapper" v-if="!tokenWx">
			<view class="user-avatar">
				<u-icon name="account-fill" size="40"></u-icon>
			</view>
			<view class="user-info">
				<view class="">
					昵称
				</view>
			</view>
		</view>
		
		<view class="user-info-wrapper" v-else>
			<view class="user-avatar">
				<image :src="userInfoWx.avatarUrl" style="width: 80rpx;height: 80rpx;"></image>
			</view>
			<view class="user-info">
				<view class="">
					昵称:{{userInfoWx.nickName}}
				</view>
			</view>
		</view>
		<!-- #endif -->
		
		
		<!-- #ifndef MP-WEIXIN -->
		<view class="user-info-wrapper" v-if="!authToken">
			<view class="user-avatar">
				<u-icon name="account-fill" size="40"></u-icon>
			</view>
			<view class="user-info">
				<view class="">
					昵称
				</view>
				<view class="">
					我的积分
				</view>
			</view>
		</view>
		
		<view class="user-info-wrapper" v-else>
			<view class="user-avatar">
				<image :src="`http:${userInfo.head}`" style="width: 80rpx;height: 80rpx;"></image>
			</view>
			<view class="user-info">
				<view class="">
					昵称:{{userInfo.nickname}}
				</view>
				<view class="">
					我的积分:{{userInfo.points}}
				</view>
			</view>
		</view>
		<!-- #endif -->
		
		
		
		
		
		<view class="order-info-wrapper">
			<view class="">
				全部订单
			</view>
			<view class="">
				查看全部订单
			</view>
		</view>
		<view class="order-status-wrapper">
			<view class="wrapper">
				<view class="item">
					<i class="iconfont icon-daishouhuo"></i>
					<text>待收货</text>
				</view>
				<view class="item">
					<i class="iconfont icon-a-zhifuqianbaodaizhifu"></i>
					<text>待支付</text>
				</view>
				<view class="item">
					<i class="iconfont icon-daipingjia"></i>
					<text>待评价</text>
				</view>
			</view>
		</view>
		<view class="list-wrapper">
			<view class="item" v-for="(item,index) in list" :key="index" @click="goPage(item)">
				<view class="">
					{{item.title}}
				</view>
				<view class="">
					<i class="iconfont icon-xiangyou"></i>
				</view>
			</view>
		</view>
	
		<!-- #ifndef MP-WEIXIN -->
		<view class="btn-wrapper">
			<u-button type="primary" color="#E51B19" class="gologinBtn" @click="goLogin" v-if="!authToken">登录/注册</u-button>
			<u-button type="primary" color="#E51B19" class="gologinBtn" @click="safeOut" v-else>安全退出</u-button>
		</view>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN -->
		<view class="btn-wrapper">
			<u-button type="primary" color="#E51B19" class="gologinBtn" @click="getUserProfile">一键授权登录</u-button>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {createNamespacedHelpers} from 'vuex'
	const {mapState:mapUserState,mapActions:mapUserActions,mapMutations:mapUserMutations}=createNamespacedHelpers('user')
	export default {
		data() {
			return {
				list: [{
						title: '个人资料',
						path:'/pages/personInfo/personInfo'
					},
					{
						title: '收货地址'
					},
					{
						title: '绑定手机'
					},
					{
						title: '修改密码'
					},
					{
						title: '我的收藏'
					}
				]
			}
		},
		computed:{
			// #ifndef MP-WEIXIN
			...mapUserState(['userInfo','authToken']),
			// #endif
			// #ifdef MP-WEIXIN
			...mapUserState(['userInfoWx','tokenWx']),
			// #endif
		},
		methods: {
			...mapUserActions(['safeOutAsync']),
			// #ifdef MP-WEIXIN
			...mapUserMutations(['setUserInfoWx','setTokenWx']),
			// #endif
			goLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			async safeOut(){
				const {confirm}=await uni.showModal({
					title:'提示',
					content:'您确定要退出吗?'			
				})
				if(confirm) this.safeOutAsync(this.userInfo.uid)
			},
			goPage(arg){
				uni.navigateTo({
					url:arg.path
				})
			},
			// #ifdef MP-WEIXIN
			getUserProfile(){
				uni.getUserProfile({
					desc:'完善用户信息',
					success: (res) => {
						this.setUserInfoWx(res.userInfo)
						this.getCode(res.userInfo)
					}
				})
			},
			getCode(info){
				//调用uni.login获取code码
				uni.login({
					success: (res) => {
						this.getToken(res.code,info)
					}
				})
			},
			getToken(code,info){
				//构建一个对象
				const query={
					code,
					userInfo:info,
					appId:'wx2b9aa7f72b4f34e2',
					appSecret:'7e95acf8016e41a507de29e386fe023d'
				}
				console.log('query',query);
				uni.request({
					method: "POST",
					url:'http://47.98.128.191:3001/users/wxLogin',
					data:query,
					success:(res)=>{
						this.setTokenWx(res.data.token)
					}
				})
			}
			// #endif
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #EFEFEF;

		.user-info-wrapper {
			@include flex-box(start, center, row) padding-left: 50rpx;
			width: 750rpx;
			height: 270rpx;
			background: linear-gradient(to right, #C01E14, #EE331F);

			.user-avatar {
				@include flex-box(center, center, row) width: 120rpx;
				height: 120rpx;
				background-color: #fff;
				border-radius: 50%;
			}

			.user-info {
				margin-left: 50rpx;
				font-size: 24rpx;
				color: #fff;
			}
		}

		.order-info-wrapper {
			font-size: 26rpx;
			box-sizing: border-box;
			@include flex-box(between, center, row) width: 750rpx;
			height: 80rpx;
			border-bottom: 1rpx solid #f5f5f5;
			padding: 10rpx 20rpx;
		}

		.order-status-wrapper {
			@include flex-box(center, center, row) width: 750rpx;
			height: 140rpx;

			.wrapper {
				@include flex-box(around, center, row) width: 750rpx;
				height: 100%;
				background-color: #fff;

				.item {
					@include flex-box(center, center, column) .iconfont {
						font-size: 60rpx;
						color: #f00;
					}

					text {
						font-size: 24rpx;
					}
				}

			}
		}

		.list-wrapper {
			margin-top: 30rpx;

			.item {
				box-sizing: border-box;
				font-size: 30rpx;
				@include flex-box(between, center, row);
				padding: 0rpx 60rpx;
				width: 750rpx;
				height: 80rpx;
				background-color: #fff;
				border-bottom: 1rpx solid #f5f5f5;
			}
		}

		.btn-wrapper {
			padding-top: 30rpx;
			width: 750rpx;
			height: 350rpx;
			background-color: #fff;
			.gologinBtn {
				width: 504rpx;
			}
		}

	}
</style>